*{
	margin: 0;
	padding: 0;
}
body{
	/* 透视距离 */
	perspective: 600px;
	
}
.box{
	width: 200px;
	height: 200px;
	margin: auto;
	margin-top: 200px;
	position: relative;
	/* 子元素保留3D转换 */
	transform-style: preserve-3d;
	transform: rotateX(-30deg) rotateY(30deg);
	animation: a 40s linear infinite;
}
@keyframes a{
	0%{ transform:rotateX(-30deg) rotateY(30deg);}
	100%{ transform:rotateX(30deg) rotateY(-3600deg);}
}
.box div{
	width: 200px;
	height: 200px;
	/* border: 1px solid gray; */
	text-align: center;
	line-height: 200px;
	font-size: 60px;
	position: absolute;
	top: 0px;
	left: 0px;
	transition: all 3s;
}
.heart{
	color: red !important;
	font-size: 100px !important;
	animation: w 10s linear infinite;
}
@keyframes w{
	0%{transform: rotateY(0deg) ;}
	100%{ transform: rotateY(3600deg) ;}
}
.top{
	transform: rotateX(90deg) translateZ(100px);
	background-image: url(../img/2.jpg);
	background-color: hotpink;
}
.bottom{
	transform: rotateX(-90deg) translateZ(100px);
	background-image: url(../img/3.jpg);
	background-color: aqua;
}
.left{
	transform: rotateY(-90deg) translateZ(100px);
	background-image: url(../img/4.jpg);
	background-color: blueviolet;
}
.right{
	transform: rotateY(90deg) translateZ(100px);
	background-image: url(../img/5.jpg);
	background-color: gold;
}
.front{
	transform: translateZ(100px);
	background-image: url(../img/c1c7b405673cb013009e076d5ab71687.png);
	background-color:springgreen
}
.back{
	transform: translateZ(-100px);
	background-image: url(../img/d49825f65a119c22d58504dc6ee0b455.png);
	background-color: lightgreen;
}
.box:hover .top{
	transform: rotateX(90deg) translateZ(200px);
}
.box:hover .bottom{
	transform: rotateX(-90deg) translateZ(200px);
}
.box:hover .left{
	transform: rotateY(-90deg) translateZ(200px);
}
.box:hover .right{
	transform: rotateY(90deg) translateZ(200px);
}
.box:hover .front{
	transform: translateZ(-200px);
}
.box:hover .back{
	transform: translateZ(200px);
}